<{include file="public/header.html"}> 	
                <script src="/static/public/jquery.datetimepicker.js"></script>
                <link rel="stylesheet" type="text/css" href="/static/public/jquery.datetimepicker.css">
		<script src="/static/public/jquery.pagination.js" type="text/javascript" charset="utf-8"></script>
		<!--main部分-->
		<div class="x-main-upper w1180-con">
			<!--main--左边--logo/tab-->
			<{include file="public/user_nav.html"}> 
				<!--main--右边--banner-->
				<div class="main-right">
					<div class="mright-content">
						<!--头像、昵称、等级-->
						<{include file="public/user_top.html"}> 
						<div class="clear"></div>
						<!--邀请好友记录-->
						<div class="cash66 mt15">
							<div class="animation">
								<!--我的邀请-->
								<div class="friend-num">
									<span><{$total_count}></span>
									<p>我的邀请</p>
								</div>
								<!--溜溜币收益-->
								<div class="friend-num">
									<span><{$total_finance}></span>
									<p>溜溜币收益</p>
								</div>
								<!--积分收益-->
								<div style="margin-right: 0;" class="friend-num">
									<span><{$total_experience}></span>
									<p>积分收益</p>
								</div>						
							</div>		
							<div class="clear"></div>
							<!--title-->
							<div class="title">
								<div class="vertical"></div><p class="title66">邀请好友记录</p>
								<!--日期选择-->
							</div>
							<!--溜溜币提现记录title-->
                                                        <!--溜溜币提现记录choice-->
							<div class="choice-code">
								<div class="choice-code2 fl"><span class="code-num">好友总数：<label><{$total_count}></label>个</span></div>
								<div class="fr">
									<div class="date fl">起始日期</div>	
                                                                        <input type="text" id="friend_start_date" class="date_picker" placeholder="点击选择日期" readonly="readonly"/>
									-
                                                                        <input type="text" id="friend_end_date" class="date_picker" placeholder="点击选择日期" readonly="readonly" value="<{$end_time}>"/>
								</div>
                                                                <select class="fr mr20" id="new_flag">
								  <option value="0" selected="selected">全部</option>
								  <option value="1">已完成新手任务</option>
								  <option value="2">未完成新手任务</option>
								</select>								
							</div>
							<div class="clear"></div>
							<!--溜溜币提现记录content-->
							<div class="invite-code mt5">
								<table class="friend-code code">
									<tr>
										<th width="20%">用户名</th>
										<th>邀请溜溜币</th>
										<th>邀请积分</th>
                                                                                <th width="15%">是否完成新手任务</th>
										<th width="20%">邀请时间</th>
									</tr>
									<tbody id="friend_content">
									</tbody>
								</table>
								<!-- 页码navigation holder -->
                                                                <div class="holder" id="friends_pagination"></div>
                                                                <script type="text/javascript">
                                                                    $(function(){
                                                                        showFriendPage(0);
                                                                        $("#new_flag").change(function(){
                                                                            showFriendPage(0);
                                                                        });
                                                                        $('#friend_start_date').datetimepicker({
                                                                            format:'Y-m-d',
                                                                            closeOnDateSelect: true,
                                                                            lang:'zh',
                                                                            timepicker:false,
                                                                            onChangeDateTime:function(){
                                                                                showFriendPage(0);
                                                                            },onShow:function( ct ){
                                                                                this.setOptions({
                                                                                    maxDate:$('#friend_end_date').val()?$('#friend_end_date').val():false
                                                                                })
                                                                            }
                                                                        });
                                                                        $('#friend_end_date').datetimepicker({
                                                                            format:'Y-m-d',
                                                                            closeOnDateSelect: true,
                                                                            lang:'zh',
                                                                            timepicker:false,
                                                                            onChangeDateTime:function(){
                                                                                showFriendPage(0);
                                                                            },onShow:function( ct ){
                                                                                this.setOptions({
                                                                                    maxDate:$('#friend_start_date').val()?$('#friend_start_date').val():false
                                                                                })
                                                                            }
                                                                        });
                                                                        
                                                                    });
                                                                    function handleFriendPage(resp){
                                                                        var str = "";
                                                                        var totalCount = resp.data.totalCount;
                                                                        var list = resp.data.list;
                                                                        if(totalCount == 0){
                                                                            str += "<tr><td colspan='8'><img width='120px' src='..<{$style_dir}>/img/no-friend.png'/></td></tr>"
                                                                        }
                                                                        
                                                                        $.each(list,function(index,data){
                                                                            var temp = "";
                                                                            if(data.is_new == 1){
                                                                                temp += "<td class='green'>已完成</td>"
                                                                            }else{
                                                                                temp += "<td class='orange'>未完成</td>"
                                                                            }
                                                                            str += "<tr><td>"+data.username+"</td><td class='green'>"+data.total_finance+"</td><td  class='green'>"+data.total_experience+"</td>"+temp+"<td>"+data.create_time+"</td></tr>";
                                                                        });
                                                                        $("#friend_content").html(str);
                                                                        friendPage(totalCount,resp.data.pageIndex);
                                                                    }
                                                                    function showFriendPage(pageIndex,jq){
                                                                        var params = {};
                                                                        var flag = $("#new_flag").val();
                                                                        var start_date = $("#friend_start_date").val();
                                                                        var end_date = $("#friend_end_date").val();
                                                                        params.start_date = start_date != "" ? start_date : "";
                                                                        params.end_date = end_date != "" ? end_date : "";
                                                                        params.pageIndex = pageIndex;
                                                                        params.flag = flag;
                                                                        doPageRequest("/user/spread_friend.html",params,false,handleFriendPage,errorCallback);
                                                                    }
                                                                    
                                                                    function friendPage(total,pageIndex){
                                                                        $("#friends_pagination").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数
                                                                        callback: showFriendPage,  //点击分页时，调用的回调函数
                                                                        prev_text: '<',  //显示上一页按钮的文本
                                                                        next_text: '>',  //显示下一页按钮的文本
                                                                        link_to:"javascript:void(0);",
                                                                        items_per_page:5,  //每页显示的项数
                                                                        num_display_entries:6,  //分页插件中间显示的按钮数目
                                                                        current_page:pageIndex,  //当前页索引
                                                                        num_edge_entries:2  //分页插件左右两边显示的按钮数目
                                                                        });
                                                                    }
                                                                </script>
							</div>
						</div>
					<!--溜溜币提现记录-->
						<div class="cash66 mt15">
							<!--title-->
							<div class="title">
								<div class="vertical"></div><p class="title66">邀请溜溜币记录</p>
								<!--日期选择-->
							</div>
							<!--溜溜币提现记录choice-->
							<div class="choice-code">
								<div class="choice-code2 fl"><span class="code-num">总收益：<label><{$total_finance}></label>溜溜币</span></div>
								<div class="fr">
									<div class="date fl">起始日期</div>	
									<input type="text" id="finance_start_date" class="date_picker" placeholder="点击选择日期" readonly="readonly"/>
									-
									<input type="text" id="finance_end_date" class="date_picker" placeholder="点击选择日期" readonly="readonly" value="<{$end_time}>"/>
								</div>
								<select class="fr mr20" id="friend_finance_flag">
								  <option value="0" selected="selected">全部</option>
								  <option value="1">一级好友</option>
								  <option value="2">二级好友</option>
                                                                  <option value="3">三级好友</option>
                                                                  <option value="4">四级好友</option>
                                                                  <option value="5">五级好友</option>
								</select>								
							</div>
							<div class="clear"></div>
							<!--溜溜币提现记录content-->
							<div class="liuliu-code mt5">
								<table class="icode code">
                                                                    <tr>
                                                                            <th width="15%">用户名</th>
                                                                            <th>奖励事项</th>
                                                                            <th width="10%">溜溜币奖励</th>
                                                                            <th width="10%">好友层级</th>
                                                                            <th width="20%">奖励时间</th>
                                                                    </tr>
                                                                    <tbody id="finance_content">
                                                                    </tbody>
								</table>
								<!-- 页码navigation holder -->
								<div class="holder" id="finance_pagination"></div>
                                                                <script type="text/javascript">
                                                                    $(function(){
                                                                        showFriendFinancePage(0);
                                                                        $("#friend_finance_flag").change(function(){
                                                                            showFriendFinancePage(0);
                                                                        });
                                                                        $('#finance_start_date').datetimepicker({
                                                                            format:'Y-m-d',
                                                                            closeOnDateSelect: true,
                                                                            lang:'zh',
                                                                            timepicker:false,
                                                                            onChangeDateTime:function(){
                                                                                showFriendFinancePage(0);
                                                                            },onShow:function( ct ){
                                                                                this.setOptions({
                                                                                    maxDate:$('#finance_end_date').val()?$('#finance_end_date').val():false
                                                                                })
                                                                            }
                                                                        });
                                                                        $('#finance_end_date').datetimepicker({
                                                                            format:'Y-m-d',
                                                                            closeOnDateSelect: true,
                                                                            lang:'zh',
                                                                            timepicker:false,
                                                                            onChangeDateTime:function(){
                                                                                showFriendFinancePage(0);
                                                                            },onShow:function( ct ){
                                                                                this.setOptions({
                                                                                    maxDate:$('#finance_start_date').val()?$('#finance_start_date').val():false
                                                                                })
                                                                            }
                                                                        });
                                                                        
                                                                    });
                                                                    function handleFriendFinancePage(resp){
                                                                        var str = "";
                                                                        var totalCount = resp.data.totalCount;
                                                                        var list = resp.data.list;
                                                                        if(totalCount == 0){
                                                                            str += "<tr><td colspan='8'><img width='120px' src='..<{$style_dir}>/img/no-friend.png'/></td></tr>"
                                                                        }
                                                                        
                                                                        $.each(list,function(index,data){
                                                                            str += "<tr><td>"+data.username+"</td><td>"+data.content+"</td><td class='green'>"+data.finance+"</td><td>"+data.friend_flag+"</td><td>"+data.create_time+"</td></tr>";
                                                                        });
                                                                        $("#finance_content").html(str);
                                                                        friendFinancePage(totalCount,resp.data.pageIndex);
                                                                    }
                                                                    function showFriendFinancePage(pageIndex,jq){
                                                                        var params = {};
                                                                        var flag = $("#friend_finance_flag").val();
                                                                        var start_date = $("#finance_start_date").val();
                                                                        var end_date = $("#finance_end_date").val();
                                                                        params.start_date = start_date != "" ? start_date : "";
                                                                        params.end_date = end_date != "" ? end_date : "";
                                                                        params.pageIndex = pageIndex;
                                                                        params.flag = flag;
                                                                        doPageRequest("/user/spread_finance.html",params,false,handleFriendFinancePage,errorCallback);
                                                                    }
                                                                    
                                                                    function friendFinancePage(total,pageIndex){
                                                                        $("#finance_pagination").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数
                                                                        callback: showFriendFinancePage,  //点击分页时，调用的回调函数
                                                                        prev_text: '<',  //显示上一页按钮的文本
                                                                        next_text: '>',  //显示下一页按钮的文本
                                                                        link_to:"javascript:void(0);",
                                                                        items_per_page:5,  //每页显示的项数
                                                                        num_display_entries:6,  //分页插件中间显示的按钮数目
                                                                        current_page:pageIndex,  //当前页索引
                                                                        num_edge_entries:2  //分页插件左右两边显示的按钮数目
                                                                        });
                                                                    }
                                                                </script>
							</div>
						</div>	
						<div class="cash66 mt15">
							<!--title-->
							<div class="title">
								<div class="vertical"></div><p class="title66">邀请积分记录</p>
								<!--日期选择-->
							</div>
							<!--邀请积分记录choice-->
							<div class="choice-code">
								<div class="choice-code2 fl"><span class="code-num">总收益：<label><{$total_experience}></label>积分</span></div>
								<div class="fr">
									<div class="date fl">起始日期</div>	
                                                                        <input type="text" id="experience_start_date" class="date_picker" placeholder="点击选择日期" readonly="readonly"/>
									-
                                                                        <input type="text" id="experience_end_date" class="date_picker" placeholder="点击选择日期" readonly="readonly" value="<{$end_time}>"/>
								</div>
                                                                <select class="fr mr20" id="friend_experience_flag">
								  <option value="0" selected="selected">全部</option>
								  <option value="1">一级好友</option>
								  <option value="2">二级好友</option>
                                                                  <option value="3">三级好友</option>
                                                                  <option value="4">四级好友</option>
                                                                  <option value="5">五级好友</option>
								</select>
								
							</div>	
							<div class="clear"></div>
							<!--邀请积分记录content-->
							<div class="jifen-code mt5">
								<table class="icode code">
									<tr>
										<th width="15%">用户名</th>
										<th>奖励事项</th>
										<th  width="10%">积分奖励</th>
										<th width="10%">好友层级</th>
										<th width="20%">奖励时间</th>
									</tr>
									<tbody id="experience_content">
									</tbody>
								</table>
								<!-- 页码navigation holder -->
                                                                <div class="holder" id="experience_pagination"></div>	
                                                                <script type="text/javascript">
                                                                    $(function(){
                                                                        showFriendExperiencePage(0);
                                                                        $("#friend_experience_flag").change(function(){
                                                                            showFriendExperiencePage(0);
                                                                        });
                                                                        $('#experience_start_date').datetimepicker({
                                                                            format:'Y-m-d',
                                                                            closeOnDateSelect: true,
                                                                            lang:'zh',
                                                                            timepicker:false,
                                                                            onChangeDateTime:function(){
                                                                                showFriendExperiencePage(0);
                                                                            },onShow:function( ct ){
                                                                                this.setOptions({
                                                                                    maxDate:$('#experience_end_date').val()?$('#experience_end_date').val():false
                                                                                })
                                                                            }
                                                                        });
                                                                        $('#experience_end_date').datetimepicker({
                                                                            format:'Y-m-d',
                                                                            closeOnDateSelect: true,
                                                                            lang:'zh',
                                                                            timepicker:false,
                                                                            onChangeDateTime:function(){
                                                                                showFriendExperiencePage(0);
                                                                            },onShow:function( ct ){
                                                                                this.setOptions({
                                                                                    maxDate:$('#experience_start_date').val()?$('#experience_start_date').val():false
                                                                                })
                                                                            }
                                                                        });
                                                                        
                                                                    });
                                                                    function handleFriendExperiencePage(resp){
                                                                        var str = "";
                                                                        var totalCount = resp.data.totalCount;
                                                                        var list = resp.data.list;
                                                                        if(totalCount == 0){
                                                                            str += "<tr><td colspan='8'><img width='120px' src='..<{$style_dir}>/img/no-friend.png'/></td></tr>"
                                                                        }
                                                                        
                                                                        $.each(list,function(index,data){
                                                                            str += "<tr><td>"+data.username+"</td><td>"+data.content+"</td><td class='green'>"+data.experience+"</td><td>"+data.friend_flag+"</td><td>"+data.create_time+"</td></tr>";
                                                                        });
                                                                        $("#experience_content").html(str);
                                                                        friendExperiencePage(totalCount,resp.data.pageIndex);
                                                                    }
                                                                    function showFriendExperiencePage(pageIndex,jq){
                                                                        var params = {};
                                                                        var flag = $("#friend_experience_flag").val();
                                                                        var start_date = $("#experience_start_date").val();
                                                                        var end_date = $("#experience_end_date").val();
                                                                        params.start_date = start_date != "" ? start_date : "";
                                                                        params.end_date = end_date != "" ? end_date : "";
                                                                        params.pageIndex = pageIndex;
                                                                        params.flag = flag;
                                                                        doPageRequest("/user/spread_experience.html",params,false,handleFriendExperiencePage,errorCallback);
                                                                    }
                                                                    
                                                                    function friendExperiencePage(total,pageIndex){
                                                                        $("#experience_pagination").pagination(total, { //recordCount在后台定义的一个公有变量，通过从数据库查询记录进行赋值，返回记录的总数
                                                                        callback: showFriendExperiencePage,  //点击分页时，调用的回调函数
                                                                        prev_text: '<',  //显示上一页按钮的文本
                                                                        next_text: '>',  //显示下一页按钮的文本
                                                                        link_to:"javascript:void(0);",
                                                                        items_per_page:5,  //每页显示的项数
                                                                        num_display_entries:6,  //分页插件中间显示的按钮数目
                                                                        current_page:pageIndex,  //当前页索引
                                                                        num_edge_entries:2  //分页插件左右两边显示的按钮数目
                                                                        });
                                                                    }
                                                                </script>
							</div>									
						</div>						
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<!--footer-->
<{include file="public/footer.html"}> 		